<!--
 * @Author: 黄达全
 * @Date: 2024-08-13 16:01:02
 * @LastEditTime: 2024-08-13 17:02:20
-->
<script lang="ts" setup>
import * as elIcons from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

const iconOptions = ref<{ label: string, value: string }[]>([])
const iconLoad = () => {
    for (const key in elIcons) {
        let str = key.replace(/([A-Z])/g, '-$1').replace(/^\-/, '').toLowerCase();
        iconOptions.value.push({
            label: str,
            value: str
        })
    }
}
onMounted(() => {
    iconLoad()
})
const iconString = ref<string>('')
const emits = defineEmits(["update:modelValue"])
const changeHandle = (value:string) => {
    iconString.value = value
    console.log(iconString.value);
    
    emits("update:modelValue", iconString.value)
}
</script>

<template>
    <el-select-v2 v-model="iconString" :options="iconOptions" placeholder="请选择菜单图标" @change="changeHandle">
        <template #default="{ item }">
            <div class="options">
                <el-icon :size="12">
                    <component :is="`el-icon-${item.value }`" />
                </el-icon>
                {{ item.label }}
            </div>
        </template>
    </el-select-v2>
</template>

<style lang="scss" scoped>
.options {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>
